<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            position: absolute;
            left: 0px;
            top: 0px;
        }
        td {
            width: 48px;
            height: 48px;
        }
        .map {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 地图是10*10 500*500  表格是用来做地图的刻度线的-->
    <table border="1" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table> 
    <!-- 真正的地图是div 绝对定位 配上颜色 以后用来 apeendchid到里面 -->
    <div class="map"></div>
    <h1 id="results">Score:0</h1>
    <button id="fast">快</button>
    <button id="inThe">中</button>
    <button id="slow">慢</button>

    <script>
        // 存放身体的数组
        bodyNodes=[];
        // 游戏的成绩
        var sum=0;
        var map=document.querySelector('.map');
        //  红色表示蛇头 蓝色表示食物 黄色表示身体
        // 如何让蛇头动起来 操作蛇头div 首先需要得到蛇头div
        var headNode= createDiv('red');
        var foodNode= createDiv('blue');
        // 给蛇头添加一个自定义属性用来判断蛇头移动的方向
        headNode.value='bottom';
        // 全局一个定时器 到时候用来清除
        var t;
        // 通过鼠标按键改变蛇头的方向
        document.addEventListener('keydown',function (val) {
            switch (val.keyCode) {
                case 38:
                    // 锁住蛇头移动方向 只有蛇头的时候随意走 当有身体时候不能回头
                    if (headNode.value!='bottom'||bodyNodes.length==0) {
                        headNode.value='top'
                    }
                    break;

                case 40:
                    if (headNode.value!='top'||bodyNodes.length==0) {
                            headNode.value='bottom'
                        }
                    break;
                case 37:
                    if (headNode.value!='right'||bodyNodes.length==0) {
                            headNode.value='left'
                        }
                    break;
                case 39:
                    if (headNode.value!='left'||bodyNodes.length==0) {
                            headNode.value='right'
                        }
                    break;
            }
        })
        // 通过按钮改变蛇头移动快慢
        document.querySelector('#fast').addEventListener('click',function () {
            clearInterval(t);
            t=setInterval(move,200);
        }) 
        document.querySelector('#inThe').addEventListener('click',function () {
            clearInterval(t);
            t=setInterval(move,500);
        })
        document.querySelector('#slow').addEventListener('click',function () {
            clearInterval(t);
            t=setInterval(move,800);
        })
        // 创建div
        function createDiv(color) { 
            var div=document.createElement('div');
            div.style.width='50px';
            div.style.height='50px';
            // 产生一个0-9的随机整数并乘50
            div.style.left=parseInt(Math.random()*10)*50+'px';
            div.style.top=parseInt(Math.random()*10)*50+'px';
            // 为了改变其位置防止独立成行
            div.style.position='absolute';
            div.style.backgroundColor=color;
            map.appendChild(div);
            return div;
         }
        // 身体和蛇头移动
        function move() {
            // 让身体动起来 后一个身体跟着前一个身体上一次方向移动
            if (bodyNodes.length>0) {
                for (let index = bodyNodes.length-1; index >= 0; index--) {
                    direction(bodyNodes[index]);
                    // 让后一个身体保持和前一个身体运动方向一致
                    if (index==0) {
                        bodyNodes[0].value=headNode.value;
                    }else {
                        bodyNodes[index].value=bodyNodes[index-1].value;
                    }
                }
            }
            // 判断蛇头的方向让蛇动起来
            direction(headNode);
            // 定义规则撞墙时候
            if (parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>450||
                parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>450) {
                alert('给你玩死了');
                clearInterval(t);
            }
            // 咬到尾巴的时候
            if (bodyNodes.length>0) {
                bodyNodes.forEach(item=> {
                    if (item.style.left==headNode.style.left&&item.style.top==headNode.style.top) {
                        clearInterval(t);
                        alert('咬到尾巴了');
                    }
                })
            }
            // 当蛇吃到食物时候
            if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top) {
                // 让食物重新产生
                createFood();
                for (let index = 0; index < bodyNodes.length; index++) {
                    if (bodyNodes[index].style.left==foodNode.style.left&&bodyNodes[index].style.top==foodNode.style.top) {
                        createFood();
                        index=-1;
                    }
                    
                }
                // 产生一个身体，身体跟在最后一个身体后面，如果没有则在蛇头后面
                var bodyNode= createDiv('yellow');
                // 需要找到当前的最后一块 把所有的身体放入一个数组里
                var lastNode;
                if (bodyNodes.length>0) {
                    lastNode=bodyNodes[bodyNodes.length-1];
                }else {
                    lastNode=headNode;
                }
                // 产生的新身体和最后一块身体保持一致
                bodyNode.value=lastNode.value;
                bodyNodes.push(bodyNode);
                // 游戏的得分
                var h1=document.querySelector('#results');
                    sum+=50;
                    h1.innerHTML='Score:'+sum;
                // 设定产生的最后一块身体的位置
                switch (lastNode.value) {
                    case 'left':
                        bodyNode.style.left=parseInt(lastNode.style.left)+50+'px';
                        bodyNode.style.top=lastNode.style.top;
                        break;
                    case 'right':
                        bodyNode.style.left=parseInt(lastNode.style.left)-50+'px';
                        bodyNode.style.top=lastNode.style.top;
                        break;
                    case 'top':
                        bodyNode.style.top=parseInt(lastNode.style.top)+50+'px';
                        bodyNode.style.left=lastNode.style.left;
                        break;
                    case 'bottom':
                        bodyNode.style.top=parseInt(lastNode.style.top)-50+'px';
                        bodyNode.style.left=lastNode.style.left;
                        break;
                }
            }
            
        }
        // 随机产生食物
        function createFood() { 
                foodNode.style.left=parseInt(Math.random()*10)*50+'px';
                foodNode.style.top=parseInt(Math.random()*10)*50+'px';
         }
        // 判断蛇头和身体方向让其移动起来
        function direction(params) {
            switch (params.value) {
                case 'top':
                    params.style.top=parseInt(params.style.top)-50+'px';
                    break;

                case 'bottom':
                    params.style.top=parseInt(params.style.top)+50+'px';
                    break;
                case 'left':
                    params.style.left=parseInt(params.style.left)-50+'px';
                    break;
                case 'right':
                    params.style.left=parseInt(params.style.left)+50+'px';
                    break;   
            
            }
        }
    </script>
</body>
</html>